<template>


 <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
  <div class="infoModal">人员设置</div>
  <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"  class="formVideoModel">
    <a-form-model-item label="所属区域" ref="county"  prop="county" :autoLink="false">
     <a-cascader v-model="form.county" :options="options" placeholder="请选择省市区县" @change="validateField"/>
    </a-form-model-item>
    <a-form-model-item label="关联合同名称" ref="contractName"  prop="contractName">
     <ContractSelect v-model="form.contractName"  @update="validateFieldContractName"  v-bind:fromCityList="form.contractName"></ContractSelect>
    </a-form-model-item>
    <a-form-model-item label="人员" ref="staffYp"  prop="staffYp">
      <a-input v-model="form.staffYp" />
    </a-form-model-item>
   
   
 
    <a-form-model-item :wrapper-col="{ span: 20, offset: 9 }">
      <a-button type="primary" @click="onSubmit" >
        提交
      </a-button>
      <a-button style="margin-left: 10px;" @click="cancelEvent">
        取消
      </a-button>
    </a-form-model-item>
  </a-form-model>
 </a-modal>
</template>
<script>
import { adddwSetting } from '@/api/video'
import CitySelect from '@/views/videoManage/util/citySelect'
import ContractSelect from '@/views/videoManage/util/contractSelect'
import AreaJson from '@/views/videoManage/util/area'
export default {
  components:{CitySelect,ContractSelect},
  props:['info','type'],
  data() {
    return {
      options:[],
      cityList:[],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {type:2,county:[],contractName:''},
      rules: {
        normalYp: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        highYp: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        property: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        county: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        staffYp: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        driverMobile: [ 
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) },],
       
      },
    };
  },
  created(){
   this.options = AreaJson 
  },
  mounted(){
   if(this.type==2){
    this.form = JSON.parse(JSON.stringify(this.info)) 
    this.form.county = this.form.county.split(",")
   }
  },
  methods: {
     //手动再验证 区县
     validateField(e) {
      this.form.county =e
      this.$refs.ruleForm.validateField('county');
     },
     validateFieldContractName(e){
      this.contractName =e
      this.form.contractName =e
      this.$refs.ruleForm.validateField('contractName');
     },
    onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
        if (valid) {
           let form = JSON.parse(JSON.stringify(this.form)) 
            form.county = form.county.toString()
            adddwSetting(form).then((response) => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作成功!',
                    duration: 3,
                  })
                  this.$emit('successEvent')
                }
              }
            })
         
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
  },
};
</script>
